<script setup lang="ts" >
import { onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})
onMounted(() => {
    getHorizontalBar()
})
const target = ref()
const getHorizontalBar = async () => {
    const pcb = echarts.init(document.getElementById('RadarBar'))
    pcb.setOption({
        // 雷达图坐标系配置
        radar: {
            // 坐标系名
            name: {
                textStyle: {
                    color: '#BC70EA',
                    fontSize: 14,
                }
            },
            axisName: {
                show: true,
                formatter: '{value}*',
                fontStyle: 'italic',
                fontWeight: 'bolder',

            },
            nameGap: 10,
            // 雷达绘制类型。polygon 多边形
            shape: 'polygon',
            // 居中
            center: ['50%', '50%'],
            // 边境
            radius: '80%',
            // 开始的角度（可以避免绘制到边框之外）
            startAngle: 120,
            // 轴线配置
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#BC70EA',
                    width: 2,
                    type: 'dashed',
                    opacity: '.6'
                }
            },
            // 网格线配置
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(5, 213, 255, .8)' // 设置网格的颜色
                }
            },
            // 指示器文字
            indicator: props.data.risks.map((item) => ({
                name: item.name,
                max: 100
            })),
            // 不展示拆分区域
            splitArea: {
                show: false,
                
            }
        },
     
        // 坐标居中
        polar: {
            center: ['50%', '50%'], // 默认全局居中
            radius: '0%'
        },
        // 坐标角度
        angleAxis: {
            // 坐标轴刻度最小值
            min: 0,
            // 坐标轴分割间隔
            interval: 5,
            // 刻度增长逆时针
            clockwise: false,
            // 不显示坐标轴刻度
            axisTick: {
                show: false
            },
            // 不显示坐标轴文字
            axisLabel: {
                show: false
            },
            // 不显示坐标轴线
            axisLine: {
                show: false
            },
            // 不显示分割线
            splitLine: {
                show: false
            }
        },
        // 径向轴
        radiusAxis: {
            // 最小值
            min: 0,
            // 间隔
            interval: 20,
            // 不显示分割线
            splitLine: {
                show: true
            }
        },
        // 图表核心配置
        series: [
            {
                // 雷达图
                type: 'radar',
                // 拐点的样式，还可以取值'rect','angle'等
                symbol: 'circle',
                // 拐点的大小
                symbolSize: 10,
                // 折线拐点标志的样式
                itemStyle: {
                    normal: {
                        color: '#A43AE5'
                    }
                },
                // 区域填充样式
                areaStyle: {
                    normal: {
                        color: '#A43AE5',
                        opacity: 0.5
                    }
                },
                // 线条样式
                lineStyle: {
                    width: 2,
                    color: '#05D5FF'
                },
                // 图形上的文本标签
                label: {
                    normal: {
                        show: true,
                        formatter: (params) => {
                            return params.value
                        },
                        color: '#fff'
                    }
                },
                // 数据
                data: [
                    {
                        value: props.data.risks.map((item) => item.value)
                    }
                ]
            }
        ]
    })
}
watch(
    () => props.data,
    () => {
        getHorizontalBar()
    }
)
</script>

<template>
    <div>
        <div class="title">【雷达图】</div>
        <div ref="target" class="RadarBar" id="RadarBar">
        </div>
    </div>
</template>

<style scoped lang="scss">
.title {
    color: rgb(197, 118, 240);
    margin-left: 4em;
    margin-top: 5px;
}

.RadarBar {
    width: 100%;
    height: 30vh;
    margin-top: 3vh;
}
</style>